@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

    <Tabs>
        <TabPane Key="1">
            <Tab>示例1</Tab>
            <ChildContent>
                <Bullet TItem="string" Config="config1" />
            </ChildContent>
        </TabPane>

        <TabPane Key="2">
            <Tab>示例2</Tab>
            <ChildContent>
                <Bullet TItem="string" Config="config2" OtherConfig="config2_1" />
            </ChildContent>
        </TabPane>

        <TabPane Key="3">
            <Tab>示例3</Tab>
            <ChildContent>
                <Bullet TItem="string" Config="config3" OtherConfig="config3_1" />
            </ChildContent>
        </TabPane>

        <TabPane Key="4">
            <Tab>示例4</Tab>
            <ChildContent>
                <Bullet TItem="string" Config="config4" OtherConfig="config4_1" />
            </ChildContent>
        </TabPane>

        <TabPane Key="5">
            <Tab>示例5</Tab>
            <ChildContent>
                <Bullet TItem="string" Config="config5" OtherConfig="config5_1" />
            </ChildContent>
        </TabPane>

        <TabPane Key="6">
            <Tab>示例6</Tab>
            <ChildContent>
                <Bullet TItem="string" Config="config6" />
            </ChildContent>
        </TabPane>

        <TabPane Key="7">
            <Tab>示例7</Tab>
            <ChildContent>
                <Bullet TItem="string" Config="config7" OtherConfig="config7_1" />
            </ChildContent>
        </TabPane>
    </Tabs>

@code{

    #region 示例1

    readonly BulletConfig config1 = new BulletConfig
    {
        Data = new[]
        {
            new BulletViewConfigData
            {
                Title = "满意度",
                Measures = new[] {83},
                Targets = new[] {90}
            }
        },
        RangeMax = 100,
        Title = new Title
        {
            Visible = true,
            Text = "基础子弹图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "设定子弹图的目标值(goal)和当前进度(value)，即可展示子弹图进度情况；若没有设置最大值(max)，则最大值等于目标值"
        }
    };

    #endregion 示例1

    #region 示例2

    readonly BulletConfig config2 = new BulletConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "基础子弹图-带多颜色范围区间"
        },
        Description = new Description
        {
            Visible = true,
            Text = "自定义图例，表示各颜色范围区间代表的含义（如差、良、优）"
        },
        Data = new[]
        {
            new BulletViewConfigData
            {
                Title = "满意度",
                Measures = new int[] {83},
                Targets = new int[] {90},
                Ranges = new double[] {0, 0.6, 0.9, 1},

            }
        },
        RangeMax = 100,
        RangeColors = new string[] { "#FFB1AC", "#FFDBA2", "#B4EBBF" }
    };

    readonly object config2_1 = new
    {
        legend = new
        {
            custom = true,
            item = new []
            {
                        new
                        {
                            name = "实际进度",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#5B8FF9", // 该图例项 marker 的填充颜色
                               
                                }
                            }
                        },
                        new
                        {
                            name = "目标值",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#5B8FF9", // 该图例项 marker 的填充颜色
                                }
                            }
                        },
                        new
                        {
                            name = "差",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#FFB1AC", // 该图例项 marker 的填充颜色
                                }
                            }
                        },
                        new
                        {
                            name = "良",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#FFDBA2", // 该图例项 marker 的填充颜色
                                }
                            }
                        },
                        new
                        {
                            name = "优",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#B4EBBF", // 该图例项 marker 的填充颜色
                                }
                            }
                        },

                    }
        }
    };


    #endregion 示例2

    #region 示例3

    readonly BulletConfig config3 = new BulletConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "基础子弹图-超出目标"
        },
        Description = new Description
        {
            Visible = true,
            Text = "当进度超出子弹图最大值时，会突出显示"
        },
        Data = new[]
{
            new BulletViewConfigData
            {
                Title = "满意度",
                Measures = new[] {140},
                Targets = new[] {90},
                Ranges = new double[]{ 0, 0.6, 0.9, 1 },
            }
        },
        RangeMax = 100,
        RangeColors = new string[] { "#FFB1AC", "#FFDBA2", "#B4EBBF" },
    };

    readonly object config3_1 = new
    {
        legend = new
        {
            custom = true,
            item = new[]
            {
                    new
                    {
                        name = "实际进度",  // 图例项的文本内容
                        marker = new
                        {
                            symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                            style = new
                            {
                                fill = "#5B8FF9", // 该图例项 marker 的填充颜色                              
                            }
                        }
                    },
                    new
                    {
                        name = "差",  // 图例项的文本内容
                        marker = new
                        {
                            symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                            style = new
                            {
                                fill = "#FFB1AC", // 该图例项 marker 的填充颜色
                            }
                        }
                    },
                    new
                    {
                        name = "良",  // 图例项的文本内容
                        marker = new
                        {
                            symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                            style = new
                            {
                                fill = "#FFDBA2", // 该图例项 marker 的填充颜色
                            }
                        }
                    },
                    new
                    {
                        name = "优",  // 图例项的文本内容
                        marker = new
                        {
                            symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                            style = new
                            {
                                fill = "#B4EBBF", // 该图例项 marker 的填充颜色
                            }
                        }
                    },
            }
        }
    };

    #endregion 示例3

    #region 示例4

    readonly BulletConfig config4 = new BulletConfig
    {
        Data = new[]
        {
            new BulletViewConfigData
            {
                Title = "满意度",
                Measures = new[] {87},
                Targets = new[] {80,95}
            }
        },
        RangeMax = 100,
        RangeColors = new string[] { "#5B8FF9", "#5AD8A6" },
        Title = new Title
        {
            Visible = true,
            Text = "基础子弹图-多目标值"
        },
        Description = new Description
        {
            Visible = true,
            Text = "设定子弹图的目标值(goal)和当前进度(value)，即可展示子弹图进度情况；若没有设置最大值(max)，则最大值等于目标值"
        },
    };

    readonly object config4_1 = new
    {
        legend = new
        {
            custom = true,
            item = new[]
            {
                    new
                    {
                        name = "实际进度",  // 图例项的文本内容
                        marker = new
                        {
                            symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                            style = new
                            {
                                fill = "#5B8FF9", // 该图例项 marker 的填充颜色                              
                            }
                        }
                    },
                    new
                    {
                        name = "目标值 1",  // 图例项的文本内容
                        marker = new
                        {
                            symbol = "line",  // 该图例项 marker 的形状，参见 marker 参数的说明
                            style = new
                            {
                                fill = "#5B8FF9", // 该图例项 marker 的填充颜色
                            }
                        }
                    },
                    new
                    {
                        name = "目标值 2",  // 图例项的文本内容
                        marker = new
                        {
                            symbol = "line",  // 该图例项 marker 的形状，参见 marker 参数的说明
                            style = new
                            {
                                fill = "#5AD8A6", // 该图例项 marker 的填充颜色
                            }
                        }
                    },
            }
        }
    };

    #endregion 示例4

    #region 示例5

    readonly BulletConfig config5 = new BulletConfig
    {
        Data = new[]
    {
            new BulletViewConfigData
            {
                Title = "满意度",
                Measures = new[] {30, 40, 10, 20},
                Targets = new[] {90}
            }
        },
        RangeMax = 100,
        Title = new Title
        {
            Visible = true,
            Text = "堆叠子弹图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "设定子弹图的目标值(goal)和当前进度(value)，即可展示子弹图进度情况；若没有设置最大值(max)，则最大值等于目标值",
        },
        Label = new
        {
            offset = -6,
        },
    };

    readonly object config5_1 = new
    {
    };

    #endregion 示例5

    #region 示例6

    readonly BulletConfig config6 = new BulletConfig
    {
        Data = new[]
    {
            new BulletViewConfigData
            {
                Title = "广州",
                Measures = new[] {83},
                Targets = new[] {90}
            },
            new BulletViewConfigData
            {
                Title = "深圳",
                Measures = new[] {13},
                Targets = new[] {90}
            },
            new BulletViewConfigData
            {
                Title = "珠海",
                Measures = new[] {45},
                Targets = new[] {80}
            },
            new BulletViewConfigData
            {
                Title = "汕头",
                Measures = new[] {83},
                Targets = new[] {70}
            },
        },
        RangeMax = 100,
        Title = new Title
        {
            Visible = true,
            Text = "分组子弹图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "当data数组由多个值时，可以展示多条子弹图进行进度对比"
        }
    };

    #endregion 示例6

    #region 示例7

    readonly BulletConfig config7 = new BulletConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "分组子弹图-带颜色范围区间"
        },
        Data = new[]
        {
            new BulletViewConfigData
            {
                Title = "广州",
                Measures = new[] {83},
                Targets = new[] {90},
                Ranges = new double[]{ 0, 0.6, 0.9, 1 },

            },
            new BulletViewConfigData
            {
                Title = "深圳",
                Measures = new[] {73},
                Targets = new[] {90},
                Ranges = new double[]{ 0, 0.6, 0.9, 1 },
            },
            new BulletViewConfigData
            {
                Title = "珠海",
                Measures = new[] {65},
                Targets = new[] {80},
                Ranges = new double[]{ 0, 0.6, 0.75, 1 },
            },
            new BulletViewConfigData
            {
                Title = "汕头",
                Measures = new[] {83},
                Targets = new[] {70},
                Ranges = new double[]{ 0, 0.6, 0.75, 1 },
            },
        },
        RangeMax = 100,
        RangeColors = new string[] { "#FFB1AC", "#FFDBA2", "#B4EBBF" },
        Legend = new Legend
        {
            Custom = true,
        }
    };

    readonly object config7_1 = new
    {
        legend = new
        {
            custom = true,
            item = new[]
                    {
                        new
                        {
                            name = "实际进度",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#5B8FF9", // 该图例项 marker 的填充颜色
                               
                                }
                            }
                        },
                        new
                        {
                            name = "目标值",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "line",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#5B8FF9", // 该图例项 marker 的填充颜色
                                }
                            }
                        },
                        new
                        {
                            name = "差",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#FFB1AC", // 该图例项 marker 的填充颜色
                                }
                            }
                        },
                        new
                        {
                            name = "良",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#FFDBA2", // 该图例项 marker 的填充颜色
                                }
                            }
                        },
                        new
                        {
                            name = "优",  // 图例项的文本内容
                            marker = new
                            {
                                symbol = "square",  // 该图例项 marker 的形状，参见 marker 参数的说明
                                style = new
                                {
                                    fill = "#B4EBBF", // 该图例项 marker 的填充颜色
                                }
                            }
                        },

                    }
        }
    };

    #endregion 示例7

}